<template>
  <div class="publish_nows">
    <el-form :rules="rules" ref="form" class="release_form demo-ruleForm" label-position="left" label-width="110px" :model="form">
        <el-form-item label="发布者">
            <p>无为</p>
        </el-form-item>
        <el-form-item class="release_form_item" label="消息分类" prop="type">
          <el-select v-model="form.type" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息标题" prop="value">
            <el-input placeholder="再次输入内容" type="textarea" v-model="form.value"></el-input>
        </el-form-item>
        <el-form-item label="定时发送" prop="time">
            <el-date-picker
              v-model="form.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item class="release_form_item" label="发送用户" prop="user">
          <el-select v-model="form.user" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button @click="submitForm('form')" type="primary">发布</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
    export default {
      data() {
        return {
          options: [{
            value: '选项1',
            label: '全部'
          }, {
            value: '选项2',
            label: '等待审核'
          }, {
            value: '选项3',
            label: '审核通过'
          }, {
            value: '选项4',
            label: '驳回修改'
          }, {
            value: '选项5',
            label: '已下架'
          }],
          form: {
              value: '',
              user: '',
              type: '',
              time: ''
          },
          rules: {
            type: [
              { required: true, message: '请选择分类', trigger: 'change' },
            ],
            value: [
              { required: true, message: '请输入标题', trigger: 'blur' }
            ],
            time: [
              { required: true, message: '请选择时间', trigger: 'change' }
            ],
            user: [
              { required: true, message: '请选择时间', trigger: 'change' }
            ]
          },
          
          articleTitle: '',
          dialogImageUrl: '',
        }
      },
      methods: {
        submitForm(formName) {
         this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          console.log(file)
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        gobeyond(files, fileList) {
          let num = fileList.length;
          this.$message({
              message: '最多上传'+num+'张图片',
              type: 'warning'
          })
        }
      }
    }
</script>
<style scoped lang="less">
    .publish_nows {
        padding: 0 40px;
        .release_form {
            width: 80%;
        }
        .release_form_item {
            width: 50%;
        }
    }
    .el-textarea {
      width: 45%;
    }
</style>



